<template>
  <div class="main">
    <button class="button" @click="clickStart" v-if="!show">
      点我播放动画
    </button>
    <button class="button" @click="clickStop" v-if="show">点我停止动画</button>
    <div class="body" v-if="show"><audio src="../../video/xinyang.mp3" controls="controls"></audio></div>
  </div>
</template>
<script>
export default {
  data() {
    return {
      show: false,
    };
  },
  methods: {
    clickStart() {
      this.show = true;
    },
    clickStop() {
      this.show = false;
    },
  },
};
</script>
<style lang='scss' scoped>
.body {
  padding: 0px;
  margin: 0px;
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100vh;
  background: #000;
  //使用动画
  animation-name: bg_change; //动画名称
  animation-duration: 10s; //动画执行时长（执行10s）
  animation-timing-function: ease-in-out; //动画执行曲线,过度效果
  animation-iteration-count: infinite; //重复播放
  animation-direction: alternate; //是否轮流方向播放从0%到100%->100%到0%->0%到100%
  // animation: name duration timing-function delay iteration-count direction fill-mode;  //一般简写
}

//定义动画
@keyframes bg_change {
  0% {
    background: red;
  }
  20% {
    background: blue;
  }
  40% {
    background: blueviolet;
  }
  60% {
    background: burlywood;
  }
  80% {
    background: cadetblue;
  }
  100% {
    background: darkgray;
  }
}
</style>